<template>
  <div class="b-l mb-2">
    <div class="bg-grey py-1 px-2">{{bet.ruleName}} {{bet.betType}} {{bet.bets}}注{{bet.amount}}元</div>
    <div class="tips spacing-sm p-2" v-html="stringify(bet)"></div>
  </div>
</template>

<script>
export default {
  name: 'hubei11c5-bet',
  props: ['bet', 'results'],
  methods: {
    stringify (bet) {
      var {bold, content} = bet
      var groups = content.split('*').map(g => g.split('|'))
      groups = groups.map(g => g.map(e => this.res.includes(e) ? `<b>${e}</b>` : e))
      var [q, w = []] = groups
      return bold ?
        `(${q.join(' ')}) ${w.join(' ')}` :
        `${groups.map(g => g.join(' ')).join(' | ')}`
    }
  },
  computed: {
    res () {
      if (this.results) {
        return this.results.split(/\s+/)
      }
      return []
    }
  }
}
</script>

